import * as React from 'react';
import { Text, View, TextInput,StyleSheet, Image,ActivityIndicator,
    TouchableOpacity,ScrollView
} from 'react-native';
import { WebView } from 'react-native-webview';
import Topic from  "./Topic"
import Commend from  "./Commend"
export default class Shop extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isShow: false,
            recommendTopic: null,
            hotTopic: null,
            category: null,
            other: null,
            refreshing: false
        };
    }
    render() {
        return (
            <View style={{flex:1}}>
                {/*<WebView*/}
                    {/*source={{uri:'http://www.jianshu.com/u/d5b531888b2b'}}*/}
                    {/*style={{width:'100%',height:'100%'}}*/}
                {/*/>*/}
                {
                    this.state.isShow ?
                        (<ScrollView
                            style={[styles.container, {paddingTop:20}]}>
                            <Topic data={this.state.recommendTopic}  type="manager"/>
                            <View style={styles.hr}></View>
                            <Commend title="热门推荐" data={this.state.hotTopic}  type="it"/>
                            <View style={styles.hr}></View>
                            <Commend title="清新一刻" data={this.state.other}  type="sanwen"/>
                            <View style={styles.space}></View>
                        </ScrollView>)
                        :
                        (<ActivityIndicator
                            animating={true}
                            style={[{height: 80}]}
                            size="large"
                        />)
                }
            </View>
        );
    }
    componentDidMount(){
        this._fetchData();
    }
    _fetchData(callback){
        fetch('http://10.0.2.2:3000/data/read?type=config')
            .then((response) => response.text())
            .then((responseText) => {
               let  data = JSON.parse(responseText);
                if(data.status){
                    let obj = data.data;
                    this.setState({
                        isShow: true,
                        recommendTopic: obj.recommendTopic,
                        hotTopic: obj.hotTopic,
                        category: obj.category,
                        other: obj.other,
                        refreshing: false
                    });
                }else{
                    alert('服务异常,正在紧急修复,请耐心等待');
                }
            })
            .catch(function(err){
                //failCallback(err);
                alert('服务异常,正在紧急修复,请耐心等待2');
            });
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    hr:{
        borderWidth: 2,
        borderColor: '#ccc',
        marginTop:20,
        marginBottom:10
    },
    space:{
        height:70
    }
});
//Z自定义组件封装导出
module.exports = Shop
